<template>
  <div class="col-md-10 col-md-offset-1">
    <div class="panel home-goods">
      <div class="panel-heading">
        <i class="line"></i>
        <h3>猜你喜欢 Guess &amp; Likes</h3>
      </div>
      <div class="panel-body">
        <div
          id="newGoodsCarousel"
          class="carousel slide goods"
          data-ride="carousel"
        >
          <div class="carousel-inner" id="newGoods">
            <div class="item goods active left">
              <div class="row">
                <div class="col-md-2" v-for="p in products.slice(0,6)" :key="p.goodId">
                 <product :product="p"></product>
                </div>
              </div>
            </div>

            <div class="item goods next left">
              <div class="row">
                <div class="col-md-2" v-for="p in products.slice(6,12)" :key="p.goodId">
                 <product :product="p"></product>
                </div>
              </div>
            </div>
          </div>
          <a
            class="left carousel-control"
            href="#newGoodsCarousel"
            role="button"
            data-slide="prev"
          >
            <span
              class="glyphicon glyphicon-chevron-left"
              aria-hidden="true"
            ></span
            ><span class="sr-only">Previous</span></a
          >
          <a
            class="right carousel-control"
            href="#newGoodsCarousel"
            role="button"
            data-slide="next"
          >
            <span
              class="glyphicon glyphicon-chevron-right"
              aria-hidden="true"
            ></span
            ><span class="sr-only">Next</span></a
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Product from "./Product.vue"
export default {
  props:['products'],
  components:{
    Product
  }
}
</script>
